<template>  
    <div id="allweekly">
        <div class="perweek">
            <div  v-for='item in weeklyTotal'>
                <div class='monthtitle'>{{ item.date }}</div>
                <div class="weeklyTotal clearfix">
                    <div v-for='(detail,index) in item.detail' :class="{forbin:detail.totalCourse == 0,weeklyDetail: true}" @click="weeklyXQ(detail)">
                        <p>第{{ item.detail.length-index }}周</p> 
                        <p>{{ detail.start }} ~ {{ detail.end }}</p> 
                        <p>{{ detail.totalCourse }}节课 &nbsp;&nbsp; 消耗{{ detail.totalKcal }}千卡  </p> 
                    </div>     
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import api from "../../api"
    import {
        refreshTitle,
        errFun,
        today,
        getWeeks,
        getWeek,
        getWeekStartAndEnd,
    } from "../../tools.js";
    export default {
        data() {
            return {
                weeklyTotal: [],

            }
        },
        created() {
            refreshTitle(this.$route.meta.title);
        },
        mounted() {
            this.$nextTick(function() {
                this.getAllweekly();
                this.$store.dispatch('GET_WEEKLY');
            })
        },
        methods: {
            getAllweekly() {
                var that = this;
                api.getAllWeekly().then(function(response) {
                    if (response.data.code == 100) {
                        // 说明有数据的,首先进行删选同一年份的，其次筛选同一月份的
                        that.weeklyTotal = that.forResult(response.data.result);
                    }

                })
            },
            forResult(result) {
                var testArr = [];
                for (var i = 0; i < result.length; i++) {
                    var tempstr = getWeek(result[i].year + '.' + new Date(result[i].start).Format("M.dd"));
                    result[i].week = tempstr.substr(2, 1);
                    result[i].start = new Date(result[i].start).Format("M月dd日");
                    result[i].end = new Date(result[i].end).Format("M月dd日");
                }
                for (var i = 0; i < result.length; i++) {
                    var obj = {
                        date: '',
                        detail: [],
                    };
                    obj.date = result[i].year + '年' + result[i].month + '月';
                    obj.detail.push(result[i]);
                    // 遍历一遍
                    if (testArr.length != 0) {
                        var flag = false;
                        for (var j = 0; j < testArr.length; j++) {
                            if (obj.date == testArr[j].date) {
                                testArr[j].detail.push(result[i]);
                                flag = true;
                            }
                        };
                        if (flag == false) {
                            testArr.push(obj);
                        }
                    } else {
                        testArr.push(obj);
                    }
                }
                return testArr;
            },
            forweeklyTotal() {
                var weeklyTotalLength = this.weeklyTotal.length;
                var weeklyTotal = this.weeklyTotal;
                // 在中间进行插入元素
                for (var i = 0; i < weeklyTotalLength; i++) {
                    var len = weeklyTotal[i].detail.length;
                    var current = weeklyTotal[i].detail;
                    for (var h = 0; h < len; h++) {
                        if (h + 1 < len) {
                            var detailtemp1 = {
                                week: 0,
                                start: "8月01日",
                                end: "8月07日",
                                totalCourse: 0,
                                totalKcal: 0,
                            }
                            var tempStart = current[h].start;
                            tempStart = current[h].year + "-" + tempStart.substring(0, tempStart.indexOf("月")) + "-" + tempStart.substring(tempStart.indexOf("月") + 1, tempStart.indexOf("日"));
                            detailtemp1.start = getWeekStartAndEnd(-(h + 1), tempStart)[0];
                            detailtemp1.end = getWeekStartAndEnd(-(h + 1), tempStart)[1];
                            if ((weeklyTotal[i].detail[h].week - weeklyTotal[i].detail[h + 1].week) > 1) {
                                weeklyTotal[i].detail.splice(h + 1, 0, detailtemp1)
                            }
                        }
                    }
                }

                for (var i = 0; i < weeklyTotalLength; i++) {
                    var len = weeklyTotal[i].detail.length;
                    var current = weeklyTotal[i].detail;
                    if (weeklyTotal[i].detail[0].week < (getWeeks(weeklyTotal[i].detail[0].year, weeklyTotal[i].detail[0].month))) {
                        // 在前面插入元素
                        var tempL = (getWeeks(weeklyTotal[i].detail[0].year, weeklyTotal[i].detail[0].month)) - weeklyTotal[i].detail[0].week;
                        var current = weeklyTotal[i].detail;
                        for (var j = 0; j < tempL; j++) {
                            var detailtemp3 = {
                                week: 0,
                                start: "8月01日",
                                end: "8月07日",
                                totalCourse: 0,
                                totalKcal: 0,
                            }
                            var tempStart = current[j].start;
                            tempStart = current[j].year + "-" + tempStart.substring(0, tempStart.indexOf("月")) + "-" + tempStart.substring(tempStart.indexOf("月") + 1, tempStart.indexOf("日"));
                            detailtemp3.start = getWeekStartAndEnd((j + 1), tempStart)[0];
                            detailtemp3.end = getWeekStartAndEnd((j + 1), tempStart)[1];
                            current.unshift(detailtemp3);
                        }

                    }
                    len = weeklyTotal[i].detail.length;
                    if (weeklyTotal[i].detail[len - 1].week != 1) {
                        // 在数组尾部进行插入元素
                        var templength = weeklyTotal[i].detail.length;
                        var tempL = weeklyTotal[i].detail[len - 1].week - 1;
                        var current = weeklyTotal[i].detail
                        for (var j = 0; j < tempL; j++) {
                            var detailtemp2 = {
                                week: 0,
                                start: "8月01日",
                                end: "8月07日",
                                totalCourse: 0,
                                totalKcal: 0,
                            };
                            var tempStart = current[templength - 1].start;
                            tempStart = current[templength - 1].year + "-" + tempStart.substring(0, tempStart.indexOf("月")) + "-" + tempStart.substring(tempStart.indexOf("月") + 1, tempStart.indexOf("日"));
                            detailtemp2.start = getWeekStartAndEnd(-(j + 1), tempStart)[0];
                            detailtemp2.end = getWeekStartAndEnd(-(j + 1), tempStart)[1];
                            current.push(detailtemp2);
                        }
                    }
                }
            },
            weeklyXQ(detail) {
                if (detail.totalCourse == 0) {
                    return;
                } else {
                    this.$router.push({
                        name: 'weekly',
                        params: {
                            id: detail != '' ? detail.weeklyId : 1,
                        },
                        query: {
                            start: detail != '' ? detail.start : "8月1日",
                            end: detail != '' ? detail.end : "8月1日",
                        },
                    })
                }
            }

        },
        watch: {
            weeklyTotal() {
                this.forweeklyTotal();
            }
        }

    }
</script>
<style>
    #allweekly {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        .perweek {
            width: 100%;
        }
        .perweek .monthtitle {
            width: 100%;
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            color: #cc9507;
        }
        .perweek .weeklyTotal {
            width: 100%;
            color: #cc9507;
            .weeklyDetail {
                width: 49%;
                height: 100px;
                border: 1px solid #cc9507;
                background-color: rgba(255, 255, 255, .1);
                box-sizing: border-box;
                border-radius: 5px;
                float: left;
                margin-bottom: 2%;
                padding-left: 10px;
                text-align: left;
                padding-top: 10px;
                p {
                    line-height: 22px;
                    /*color: #cc9507;*/
                }
            }
            .forbin {
                border-color: rgba(255, 255, 255, .8);
                color: rgba(255, 255, 255, .8);
            }
            .weeklyDetail:nth-child(2n) {
                margin-left: 1%;
            }
            .weeklyDetail:nth-child(2n-1) {
                margin-right: 1%;
            }
        }
    }
</style>